import React, { useState } from 'react';
import { Form, Input, Select, Button, Space, Tag } from 'antd';
import { SearchOutlined, ReloadOutlined, UserOutlined, PlusOutlined } from '@ant-design/icons';
import { TableCard, FilterCard, InfoCard } from './index';

const { Option } = Select;

/**
 * 统一组件库使用示例
 * 展示如何用新组件替换原有的重复代码
 */
const ExampleUsage: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // 模拟数据
  const userData = [
    { id: 1, username: 'admin', email: 'admin@example.com', status: 'active' },
    { id: 2, username: 'user1', email: 'user1@example.com', status: 'inactive' },
  ];

  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'active' ? 'green' : 'red'}>
          {status === 'active' ? '活跃' : '禁用'}
        </Tag>
      ),
    },
  ];

  const handleSearch = (values: any) => {
    console.log('搜索条件:', values);
  };

  const handleReset = () => {
    form.resetFields();
  };

  return (
    <div style={{ padding: '24px' }}>
      {/* 统计信息卡片示例 */}
      <div style={{ marginBottom: '24px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '16px' }}>
        <InfoCard
          cardType="statistic"
          icon={<UserOutlined />}
          statistic={{
            title: "总用户数",
            value: 1234,
            precision: 0,
          }}
          statusColor="info"
        />
        
        <InfoCard
          cardType="statistic"
          icon={<UserOutlined />}
          statistic={{
            title: "活跃用户",
            value: 856,
            precision: 0,
          }}
          statusColor="success"
        />
        
        <InfoCard
          cardType="statistic"
          icon={<UserOutlined />}
          statistic={{
            title: "新增用户",
            value: 42,
            precision: 0,
          }}
          statusColor="warning"
        />
      </div>

      {/* 筛选卡片示例 */}
      <FilterCard
        pageTitle="用户管理"
        titleIcon={<UserOutlined />}
        form={form}
        onFinish={handleSearch}
        extra={
          <Button 
            type="primary" 
            icon={<PlusOutlined />}
          >
            添加用户
          </Button>
        }
      >
        <Form.Item name="username" label="用户名">
          <Input placeholder="请输入用户名" style={{ width: 200 }} />
        </Form.Item>
        
        <Form.Item name="status" label="状态">
          <Select placeholder="请选择状态" style={{ width: 150 }} allowClear>
            <Option value="active">活跃</Option>
            <Option value="inactive">禁用</Option>
          </Select>
        </Form.Item>
        
        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              搜索
            </Button>
            <Button onClick={handleReset} icon={<ReloadOutlined />}>
              重置
            </Button>
          </Space>
        </Form.Item>
      </FilterCard>

      {/* 表格卡片示例 */}
      <TableCard
        title="用户列表"
        tableProps={{
          columns: columns,
          dataSource: userData,
          rowKey: 'id',
          loading: loading,
        }}
      />
    </div>
  );
};

export default ExampleUsage;

/**
 * 对比：原来的代码写法
 * 
 * 需要创建 UserList.module.css:
 * .container { padding: 24px; }
 * .filterCard { margin-bottom: 24px; }
 * .filterContent { display: flex; align-items: center; gap: 16px; }
 * .pageTitle { margin: 0; display: flex; align-items: center; gap: 8px; }
 * .titleIcon { font-size: 18px; color: #1890ff; }
 * .form { display: flex; align-items: center; gap: 16px; flex: 1; }
 * .tableCard { background: #fff; }
 * 
 * 然后在组件中：
 * import styles from './UserList.module.css';
 * 
 * return (
 *   <div className={styles.container}>
 *     <Card className={styles.filterCard}>
 *       <div className={styles.filterContent}>
 *         <Title level={4} className={styles.pageTitle}>
 *           <UserOutlined className={styles.titleIcon} />
 *           用户管理
 *         </Title>
 *         <Form className={styles.form} onFinish={handleSearch}>
 *           // 表单项...
 *         </Form>
 *       </div>
 *     </Card>
 *     
 *     <Card className={styles.tableCard}>
 *       <Table columns={columns} dataSource={userData} />
 *     </Card>
 *   </div>
 * );
 * 
 * 现在的代码：
 * - 不需要创建 .module.css 文件
 * - 不需要导入 styles
 * - 代码更简洁，复用性更强
 * - 样式统一，维护成本更低
 */ 